<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'></div>
    <script>
    class History{
        constructor() {
            this.routes = {};
            this._bindPopState();
        }

        init(path){
            history.replaceState({path:path}, null, path);
            this.routes[path] && this.routes[path]();
        }

        route(path, callback){
            this.routes[path] = callback || function(){};
        }

        go(path){
            history.replaceState({path}, null, path);
            this.routes[path] && this.routes[path]();
        }

        backOff(){
            history.back();
        }

        _bindPopState(){
            // 监听前进后退
            window.addEventListener('popstate', e => {
                console.log(e)
                const path = e.state && e.state.path;
                this.routes[path] && this.routes[path]();
            })
        }
    }

    const a = new History();
    history.pushState({a:1}, null, 'xx')
    </script>
    <script type='text/javascript' src='<%= htmlWebpackPlugin.options.dll %>'></script>
</body>
</html>